<template>
  <div class="main">
    <el-container>
      <el-header class="page-header">
        <el-icon
          @click="
            () => {
              is_collapse = !is_collapse;
            }
          "
          :size="25"
          style="cursor: pointer; margin-right: 43px"
        >
          <Expand v-if="is_collapse" />
          <Fold v-else />
        </el-icon>

        <el-breadcrumb separator="/">
          <template v-for="(item, index) in bread_list" :key="index">
            <el-breadcrumb-item v-if="item.path" :to="{ path: item.path }">{{
              item.name
            }}</el-breadcrumb-item>
            <el-breadcrumb-item v-else>{{ item.name }}</el-breadcrumb-item>
          </template>
        </el-breadcrumb>

        <div class="user-box" @click="exit_req()">
          <el-icon :size="20"><UserFilled /></el-icon>
          <span>Admin</span>
          <el-icon :size="20"><Right /></el-icon>
        </div>
      </el-header>
      <div class="content">
        <el-menu
          :collapse="is_collapse"
          class="el-menu-vertical"
          :default-active="menu_active"
          :router="true"
        >
          <el-menu-item index="/totalData">
            <el-icon><Histogram /></el-icon>
            <span>数据总览</span>
          </el-menu-item>

          <el-sub-menu index="/user">
            <template #title>
              <el-icon><Avatar /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/user">用户列表</el-menu-item>
            <!-- <el-menu-item index="/payChannel">支付渠道</el-menu-item> -->
            <el-menu-item index="/userOnline">在线列表</el-menu-item>
            <el-menu-item index="/UserGameList">游戏记录</el-menu-item>
            <el-menu-item index="/UserReg">注册管理</el-menu-item>
            <el-menu-item index="/UserMonitor">用户监控</el-menu-item>
            <el-menu-item index="/UserLog">用户日志</el-menu-item>
          </el-sub-menu>


          <el-sub-menu index="/fund">
            <template #title>
              <el-icon><WalletFilled /></el-icon>
              <span>资金管理</span>
            </template>
            <el-menu-item index="/fundSetting">资金设置</el-menu-item>
            <!-- <el-menu-item index="/payChannel">支付渠道</el-menu-item> -->
            <el-menu-item index="/deposit">充值记录</el-menu-item>
            <el-menu-item index="/withdraw">提现记录</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="/activity">
            <template #title>
              <el-icon><StarFilled /></el-icon>
              <span>活动管理</span>
            </template>
            <el-menu-item index="/activity">活动管理</el-menu-item>
            <el-menu-item index="/ChangeCode">兑换码</el-menu-item>

          </el-sub-menu>

          <el-sub-menu index="/game">
            <template #title>
              <el-icon><Flag /></el-icon>
              <span>集成游戏管理</span>
            </template>
            <el-menu-item index="/gameCompany">游戏公司</el-menu-item>
            <el-menu-item index="/gameList">游戏列表</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="/game_me">
            <template #title>
              <el-icon><Menu /></el-icon>
              <span>游戏管理</span>
            </template>
            <el-menu-item index="/GameList_me">游戏列表</el-menu-item>
            <el-menu-item index="/gameStock">库存配置</el-menu-item>
            <el-menu-item index="/GameCfg">游戏配置</el-menu-item>
            <el-menu-item index="/FixCfg">补偿配置</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="/system">
            <template #title>
              <el-icon><Tools /></el-icon>
              <span>系统设置</span>
            </template>
            <el-menu-item index="/SubAdmin">代理列表</el-menu-item>
            <el-menu-item index="/msgManage">短信设置</el-menu-item>
            <el-menu-item index="/warning">预警设置</el-menu-item>
          </el-sub-menu>

          <!-- <el-menu-item index="/message">
            <el-icon><BellFilled /></el-icon>
            <span>消息管理</span>
          </el-menu-item> -->
        </el-menu>

        <div class="main-content">
          <!-- <router-view /> -->

          <router-view v-slot="{ Component }">
            <keep-alive>
              <component
                :is="Component"
                v-if="route.meta.keepAlive"
                :key="route.name"
              ></component>
            </keep-alive>
            <component
              :is="Component"
              v-if="!route.meta.keepAlive"
              :key="route.name"
            ></component>
          </router-view>
          
        </div>
      </div>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
const is_collapse = ref(true);
const route = useRoute();
const router = useRouter();
const menu_active = ref("/totalData");
const bread_list = ref([]);
onMounted(() => {
  menu_active.value = route.path;
});
watch(
  () => route,
  (val) => {
    bread_list.value = val.meta.route;
  },
  { immediate: true, deep: true }
);
const exit_req = () => {
  ElMessageBox.confirm("是否退出当前帐号?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    localStorage.removeItem("token");
    router.push({
      path: "/login",
    });
  });
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .main-content {
    flex: 1;
    display: flex;
    box-sizing: border-box;
    padding: 15px;
    height: calc(100vh - 60px);
    overflow-y: auto;
  }
}
.page-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #dcdfe6;
  .user-box {
    position: fixed;
    right: 15px;
    top: 10px;
    height: 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 15px;
    border-radius: 20px;
    border: 1px solid #dcdfe6;
    cursor: pointer;
    &:hover {
      background-color: #fafafa;
    }
    span {
      font-size: 17px;
      padding: 0 10px;
    }
  }
}
.el-menu-vertical {
  height: calc(100vh - 60px);
  overflow-y: auto;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  height: calc(100vh - 60px);
  overflow-y: auto;
}
</style>
